<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <!--全局操作-->
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="handleAdd()" v-if="hasPerm('admin:system:role:add')">新建</a-button>
      </div>
      <!--数据表格-->
      <a-table
        :rowKey=" (record => record.id)"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
      >
        <!--字段扩展显示customRender-->
        <template v-slot:serial="text, record, index">
          {{ index + 1 }}
        </template>
        <template v-slot:state="text">
          <a-badge :status="text | dictIconFilter(that,'switch_state')" :text="text | dictFilter(that,'switch_state')" />
        </template>
        <!--行操作-->
        <template v-slot:action="text, record">
          <span>
            <a href="javascript:" @click="$refs.authority.edit(record)" v-if="hasPerm('admin:system:role:grant')">授权</a>
            <a-divider type="vertical"/>
            <a href="javascript:" @click="handleEdit(record)" v-if="hasPerm('admin:system:role:edit')">编辑</a>
            <a-divider type="vertical"/>
            <a-popconfirm title="确定删除吗？" @confirm="handleDelete(record)" v-if="hasPerm('admin:system:role:delete')">
              <a-icon slot="icon" type="question-circle-o" style="color: red"/>
              <a href="javascript:">删除</a>
            </a-popconfirm>
          </span>
        </template>
      </a-table>
      <!--自定义组件-->
      <save ref="save" @refresh="refresh"></save>
      <authority ref="authority"></authority>
    </a-card>
  </page-header-wrapper>
</template>
<script>
  import curdMixins from '@/utils/mixins/curdMixins'
  import { getList, deleteByIds } from '@/api/system/role'
  import save from './save'
  import authority from './authority'
  export default {
    mixins: [curdMixins],
    components: {
      save,
      authority
    },
    data () {
      this.columns = [
        {
          title: '#',
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '角色',
          dataIndex: 'roleName'
        },
        {
          title: '状态',
          dataIndex: 'state',
          scopedSlots: { customRender: 'state' }
        },
        {
          title: '描述',
          dataIndex: 'roleDesc'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          sorter: true
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ]
      return {}
    },
    created () {
      this.getDictValue('switch_state').then(res => {
        this.switch_state = res.data
      })
    },
    methods: {
      list (param) {
        return getList(param)
      },
      delete (record) {
        return deleteByIds({ ids: [record.id] })
      }
    }
  }
</script>
<style scoped>
</style>
